//基本上就 一个viewPager 的标题头 认真看
//TabBar 和TabBarView  混合使用

//const TabBar({
//Key key,
//@required this.tabs,//WidgetList，一般使用系统提供的Tab作为Widget哦
//this.controller,//控制器
//this.isScrollable: false,//总内容超出自动宽展区域并可以滚动
//this.indicatorColor,//指示器颜色
//this.indicatorWeight: 2.0,指示器宽度
//this.indicatorPadding: EdgeInsets.zero,//指示器padding
//this.indicator,//自定义指示器
//this.indicatorSize,//指示器大小
//this.labelColor,//文字颜色
//this.labelStyle,//文字style
//this.unselectedLabelColor,//未选中文字颜色
//this.unselectedLabelStyle,//未选中文字style
//})

//tab 的参数
//const Tab({
//Key key,
//this.text,
//this.icon,
//this.child,
//})

import 'package:flutter/material.dart';
import 'package:flutter_practice/utils/Utils.dart';

class MyTabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: choices.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('tabbed appbar'),
          bottom: TabBar(
            tabs: choices.map((Choice choice) {
              return Tab(
                text: choice.title,
                icon: Icon(choice.icon),
              );
            }).toList(),
            isScrollable: true,
            indicatorColor: Colors.pink, // 下表线的颜色
            labelColor: Colors.black, // 选中时 的颜色
            unselectedLabelColor: Colors.lightGreen, //未选中的颜色
          ),
        ),
        body: TabBarView(
          children: choices.map((Choice choice) {
            return Padding(
              padding: EdgeInsets.all(16.0),
              child: ChoiceCard(
                choice: choice,
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'CAR', icon: Icons.directions_car),
  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  const Choice(title: 'BOAT', icon: Icons.directions_boat),
  const Choice(title: 'BUS', icon: Icons.directions_bus),
  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
  const Choice(title: 'WALK', icon: Icons.directions_walk),
];

class ChoiceCard extends StatelessWidget {
  final Choice choice;

  const ChoiceCard({this.choice});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Card(
      color: Colors.red,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(
              choice.icon,
              size: 120.0,
              color: Colors.blue,
            ),
            Text(
              choice.title,
            ),
          ],
        ),
      ),
    );
  }
}
